<template>
  <!-- 课程管理-新增 -->
  <div class="course-add">
    <el-form :model="formMsg">
      <!-- 基本信息 -->
      <div class="baseMsg">
        <mytitle>基本信息</mytitle>
        <el-form-item>
          <el-input
            type="text"
            placeholder="请输入课程名称"
            v-model="formMsg.courseName"
            maxlength="50"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            type="textarea"
            placeholder="请输入课程简介"
            v-model="formMsg.courseDesc"
            maxlength="500"
            :rows="5"
            show-word-limit
            resize="none"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-upload
            ref="upImg"
            class="avatar-uploader"
            action="http://42.193.182.88:9021/sports/uploadPicture2"
            name="files"
            :on-success="uploadSuccess"
            :show-file-list="false"
            :auto-upload="true"
          >
            <img
              v-if="formMsg.imageUrl"
              :src="formMsg.imageUrl"
              class="avatar"
            />
            <i v-else class="el-icon-picture-outline avatar-uploader-icon"></i>
            <span>添加封面</span>
          </el-upload>
          <span class="imgMsg"
            >建义尺寸 100 x 50 px ，且不超过150KB , 可支持 .jpg .jpge .png
            格式图片.</span
          >
        </el-form-item>
      </div>
      <!-- 课程分类 -->
      <div class="classification">
        <mytitle>课程分类</mytitle>
        <el-form-item>
          <el-checkbox-group v-model="formMsg.courseType">
            <el-checkbox label="柔韧" border></el-checkbox>
            <el-checkbox label="耐力" border></el-checkbox>
            <el-checkbox label="速度灵敏" border></el-checkbox>
            <el-checkbox label="上肢力量爆发" border></el-checkbox>
            <el-checkbox label="下肢力量爆发" border></el-checkbox>
            <el-checkbox label="上肢力量" border></el-checkbox>
            <el-checkbox label="核心力量" border></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>
      <!-- 禁选课程 -->
      <div class="noElection">
        <mytitle>学生下以下指标不及格将禁选本课程</mytitle>
        <el-form-item>
          <el-checkbox-group v-model="formMsg.courseIndicator">
            <el-checkbox label="柔韧" border></el-checkbox>
            <el-checkbox label="耐力" border></el-checkbox>
            <el-checkbox label="速度灵敏" border></el-checkbox>
            <el-checkbox label="上肢力量爆发" border></el-checkbox>
            <el-checkbox label="下肢力量爆发" border></el-checkbox>
            <el-checkbox label="上肢力量" border></el-checkbox>
            <el-checkbox label="核心力量" border></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>
      <!-- 特定信息 -->
      <div class="impMsg">
        <mytitle>重要信息</mytitle>
        <el-form-item>
          <el-select v-model="formMsg.sex" placeholder="请选性别">
            <el-option
              v-for="item in sexs"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select v-model="formMsg.gradeId" multiple placeholder="请选年级（多选）">
            <el-option
              v-for="item in gradeIds"
              :key="item.id"
              :label="item.dictValue"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <!-- 考试指标 -->
      <div class="examinIdx">
        <mytitle>考试指标</mytitle>
        <el-form-item>
          <el-button>添加指标</el-button>
          <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
            {{ tag.name }}
          </el-tag>
        </el-form-item>
      </div>
    </el-form>
    <div
      class="tijian_add button_add"
      style="position: fixed; left: 0; bottom: 0; width: 100%"
    >
      <div class="btnBox">
        <el-button @click="back">取消</el-button>
        <el-button @click="add">增加</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import mytitle from '../../components/title'
import { getAllGardas } from '@/api/index'
export default {
  name: 'courseAdd',
  components: {
    mytitle
  },
  data() {
    return {
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      upIData: null,
      fileList: [],
      file: null,
      fileName: '',
      type: this.$route.query.type,
      sexs: [{ // 性别
        value: 1,
        label: '男'
      },{
        value: 2,
        label: '女'
      }],
      gradeIds: [], // 年级列表
      formMsg: {
        courseName: '',
        courseDesc: '',
        courseType: [], // 课程分类
        courseIndicator: [], // 指标id
        sex: '',
        gradeId: ''
      },
      tags: [
        { name: '三米运球', type: '' },
        { name: '百米跳远', type: '' },
        { name: '现场做梦', type: '' },
      ]
    }
  },
  created() {
    this.$store.commit('common/updateTitle', { url: 'dealer', type: this.$route.query.type })
    this.getGarda()
  },
  methods: {
    async getGarda() {
      const res = await getAllGardas()
      console.log('年级:', res);
      this.gradeIds = res.data.data
    },
    add() {
      // this.$http({
      //   method: 'POST',
      //   url: this.$http.adornUrl('insertCourse'),
      //   data: this.formMsg
      // })
      // this.$refs.upImg.submit();
    },
    uploadSuccess(res, file, fileList) {
      console.log(res)
      console.log(file)
      console.log(fileList)
    },
    back() {
      this.$confirm('此操作将不保存该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.back()
      }).catch(() => {

      });
    }
  },
  watch: {
    $route(val) {
      console.log(val, "333333333333333");
      var type = val.query.type;
      this.$store.commit('common/updateTitle', { url: 'dealer', type: type })
    },
  },
  mounted() {
    console.log(this.type);
  },


}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 0.0052rem dashed #d9d9d9;
  border-radius: 0.0313rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 0.1458rem;
  color: #8c939d;
  width: 0.9063rem;
  height: 0.5729rem;
  line-height: 0.5729rem;
  text-align: center;
}
.avatar {
  width: 0.9063rem;
  height: 0.5729rem;
  display: block;
}
// 课程管理-新增
.course-add {
  padding: 0.1667rem 0.151rem;
  border-radius: 0.0781rem;
  background-color: #fff;
  position: relative;
  // 基本信息
  .baseMsg {
    /deep/.el-input .el-input__count .el-input__count-inner {
      background-color: #f7fbfc;
      line-height: 0.25rem;
    }
    /deep/.el-input > .el-input__inner {
      background-color: #f7fbfc;
      height: 0.2604rem;
    }
    /deep/.el-textarea > .el-textarea__inner {
      background-color: #f7fbfc;
      line-height: 30 px;
    }
    /deep/.el-textarea .el-input__count {
      background-color: rgba($color: #000000, $alpha: 0);
    }
    /deep/.avatar-uploader .el-upload,
    .avatar-uploader .avatar-uploader-icon {
      width: 0.9063rem;
      height: 0.5729rem;
      background: #f8f8f8;
      border-radius: 0.0781rem;
      border: 0.0052rem dashed #c4c4c4;
      line-height: 0.5729rem;
    }
    .el-upload {
      position: relative;
      span {
        position: absolute;
        bottom: 0.2865rem;
        left: 0.3125rem;
        line-height: 0.0885rem;
      }
    }
    .imgMsg {
      font-size: 12px;
      font-weight: 400;
      color: #CECECE;
      line-height: 17px;
    }
  }
  // 课程分类
  // 重要信息
  .impMsg {
    font-size: 0.0625rem;
    font-weight: 400;
    color: #cecece;
    line-height: 0.0885rem;
    /deep/.el-select>.el-input--medium>.el-input__inner,/deep/.el-input .el-input__count .el-input__count-inner {
      background-color: #f7fbfc;
      line-height:0.25rem;
    }
  }
  // 学生下以下指标不及格将禁选本课程
  .examinIdx {
    margin-bottom: 0.625rem;
    .el-form-item {
      display: flex;
      .el-button {
        width: 0.6563rem;
        height: 0.2604rem;
        background: #f7fbfc;
        border-radius: 0.0521rem;
        font-size: 0.0729rem;
        font-weight: 400;
        color: #0fdd8d;
        line-height: 0.1563rem;
        vertical-align: middle;
      }
      .el-tag {
        margin-left: 0.1042rem;
        width: 0.6563rem;
        height: 0.2604rem;
        background: #f8f8f8;
        border-radius: 0.0521rem;
        vertical-align: middle;
        line-height: 0.2604rem;
        text-align: center;
        position: relative;
        /deep/.el-tag__close .el-icon-close {
          position: absolute;
          left: 0;
        }
      }
    }
  }
}
/deep/ .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label {
  font-size: 0.0729rem;
  padding-left: 0;
}
/deep/.el-checkbox .el-checkbox__input {
  display: none;
}
.el-checkbox-group .el-checkbox {
  width: 0.6563rem;
  height: 0.2604rem;
  background: #f8f8f8;
  border-radius: 0.0521rem;
  font-size: 0.0729rem;
  font-weight: 400;
  color: #888888;
  text-align: center;
  vertical-align: middle;
  line-height: 0.1719rem;
}
</style>
